<template>
  <div class="divBox relative">
    <el-card class="box-card">
      
	  <!-- <el-checkbox v-model="checked" @change="changeChecked" style="position: absolute;top: 95px;left: 30px;"></el-checkbox> -->
      <el-table
          :data="list"
          style="width: 100%"
		  size="mini"
		  height="600px"
		  :highlight-current-row="true"
		  :header-cell-style=" {fontWeight:'bold'}"
          row-key="id"
          lazy
          :load="load"
		  @selection-change="handleSelectionChange"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
		  <!-- <el-table-column
		        type="selection"
				v-slot="{row, rowIndex}"
		        width="55" >
				<template v-if="shouldShowCheckbox(row)">
				    <el-checkbox :value="row.checked" @change="handleCheckboxChange(row)"></el-checkbox>
				</template>
		  </el-table-column> -->
		  <el-table-column
		    prop="id"
		    label="ID"
		  	align="center">
		  </el-table-column>
		  <el-table-column
		    prop="title"
		    label="标题"
		  	align="center">
		  </el-table-column>
          <el-table-column
		  	
            prop="name"
            label="图标"
			align="center">
			<template slot-scope="scope">
				<div>
                    <i :class="scope.row.icon" v-if="scope.row.icon"></i>
                    <span v-else>--</span>
                </div>
			</template>
          </el-table-column>
          <el-table-column
            prop="update_time"
            label="修改时间"
			align="center">
		  </el-table-column>
          <el-table-column
            prop="name"
            label="状态"
			align="center">
			<template slot-scope="scope">
				<el-tag
					size="small"
					v-if="scope.row.is_show==1"
				    effect="dark">
				    显示
				  </el-tag>
				  <el-tag
					  size="small"
					  v-if="scope.row.is_show==0"
					  type="danger"
				      effect="dark">
				      隐藏
				    </el-tag>
			</template>
          </el-table-column>
		  <el-table-column
            prop="name"
            label="排序"
			align="center">
			<template slot-scope="scope">
				<!-- <el-input v-model="scope.row.sort" size="small" 
                  style="width: 100px;"  
                 type="number"></el-input> -->
				 {{ scope.row.sort }}
			</template>
          </el-table-column>
		  <el-table-column
		  			align="center"
					label="操作">
				<template slot-scope="scope">
					<el-button @click="editRow(scope.row)" type="text">编辑</el-button>
				</template>
		  </el-table-column>
        </el-table>
	  <!-- <div class="page">
	              <el-pagination
	                      background
	                      @size-change="pageChange"
	                      @current-change="handleCurrentChange"
	                      :current-page="page"
	                      :page-size="pageSize"
	                      layout="total, sizes, prev, pager, next, jumper"
	                      :total="page_totle">
	              </el-pagination>
	          </div> -->
    </el-card>
	
	<!-- 新增角色 -->
	<el-dialog
	  :title="title"
	  :visible.sync="formShow"
	  :close-on-click-modal="false"
	  width="500px">
	  <el-form ref="form" :model="form" label-width="120px">
		
		  <el-form-item label="标题">
		  		<el-input v-model="form.title" size="small" type="text"></el-input>  	
		  </el-form-item>
		  <el-form-item label="图标" v-if="form.icon">
		 		<el-select v-model="form.icon" size="small" placeholder="请选择图标">
					<el-option v-for="icon in icons" :key="icon" :value="icon">
						<span style="display: flex; align-items: center;">
							<i :class="[icon]" style="margin-right: 10px;"></i>
							<span>{{ icon }}</span>
						</span>
					</el-option>
				</el-select>
				<i style="margin-left: 10px;" :class="[form.icon, 'text-primary']"></i>
		  </el-form-item>
          <el-form-item label="状态">
		  		<el-radio-group v-model="form.is_show">
			       <el-radio label="0">不显示</el-radio>
			        <el-radio label="1">显示</el-radio>
			     </el-radio-group>	
		  </el-form-item>
		  <el-form-item label="排序">
		  		<el-input v-model="form.sort" size="small" type="number"></el-input>  	
		  </el-form-item>
		  <el-form-item label="父级ID" v-if="form.parent_id!=0">
		  		<el-input v-model="form.parent_id" size="small" type="number"></el-input>  	
		  </el-form-item>
	  </el-form>
	  <span slot="footer" class="dialog-footer">
	    <el-button size="mini" @click="formShow = false">取 消</el-button>
	    <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
	  </span>
	</el-dialog>
	<el-dialog
	  v-if="isShow"
	  title="二维码"
	  :visible.sync="isShow"
	  :close-on-click-modal="false"
	  width="300px">
	  <div id="qrcode" style="text-align: center;">
	  		  
	  </div>
	</el-dialog>
  </div>
</template>
<script>
	import QRCode from 'qrcode2'
  export default {
    data() {
      return {
        title:'新增',
		isShow:false,
		form:{
			id:null,
			title:"",
			icon:"",
			is_show:"1",
			sort:"1",
			parent_id:"0"
		},
		list:[],
		page:1,
		pageSize:10,
		goodsList:[],
		checked:false,
		selectId:[],
		searchForm:{
			bath:"",
			status:"-1"
		},
		time:[],
        iconSelectorVisible: false,
        selectedIcon: '',
        iconSearchText: '',
        // Element UI 完整图标列表
        icons: [
          // 基本图标
          'el-icon-s-home', 'el-icon-menu', 'el-icon-document', 'el-icon-setting',
          'el-icon-s-data', 'el-icon-s-tools', 'el-icon-s-cooperation', 'el-icon-user-solid',
          'el-icon-s-custom', 'el-icon-s-check', 'el-icon-s-promotion', 'el-icon-s-order',
          'el-icon-s-goods', 'el-icon-s-marketing', 'el-icon-s-claim', 'el-icon-s-shop',
          'el-icon-s-platform', 'el-icon-s-management', 'el-icon-s-ticket', 'el-icon-s-finance',
          'el-icon-s-help', 'el-icon-s-operation', 'el-icon-s-release', 'el-icon-s-protection',
          'el-icon-s-discover', 'el-icon-suitcase', 'el-icon-mobile-phone', 'el-icon-service',
          
          // 方向性图标
          'el-icon-arrow-left', 'el-icon-arrow-right', 'el-icon-arrow-up', 'el-icon-arrow-down',
          'el-icon-arrow-left-outline', 'el-icon-arrow-right-outline', 'el-icon-arrow-up-outline', 'el-icon-arrow-down-outline',
          'el-icon-d-arrow-left', 'el-icon-d-arrow-right', 'el-icon-caret-left', 'el-icon-caret-right',
          'el-icon-caret-top', 'el-icon-caret-bottom', 'el-icon-d-caret', 'el-icon-triangle-left',
          'el-icon-triangle-right', 'el-icon-triangle-top', 'el-icon-triangle-bottom',
          
          // 提示建议性图标
          'el-icon-warning', 'el-icon-warning-outline', 'el-icon-error', 'el-icon-circle-close',
          'el-icon-circle-check', 'el-icon-success', 'el-icon-info', 'el-icon-question',
          'el-icon-question-filled', 'el-icon-help', 'el-icon-bell', 'el-icon-bell-on',
          
          // 操作图标
          'el-icon-edit', 'el-icon-edit-outline', 'el-icon-delete', 'el-icon-delete-outline',
          'el-icon-plus', 'el-icon-plus-outline', 'el-icon-minus', 'el-icon-minus-outline',
          'el-icon-circle-plus', 'el-icon-circle-plus-outline', 'el-icon-circle-minus', 'el-icon-circle-minus-outline',
          'el-icon-remove', 'el-icon-remove-outline', 'el-icon-check', 'el-icon-check-outline',
          'el-icon-close', 'el-icon-close-outline', 'el-icon-refresh', 'el-icon-refresh-right',
          'el-icon-refresh-left', 'el-icon-upload', 'el-icon-upload2', 'el-icon-download',
          'el-icon-view-outline', 'el-icon-share', 'el-icon-star-on', 'el-icon-star-off',
          'el-icon-star-half', 'el-icon-like', 'el-icon-like-outline', 'el-icon-more',
          'el-icon-more-outline', 'el-icon-sold-out', 'el-icon-key', 'el-icon-lock',
          'el-icon-unlock', 'el-icon-zoom-in', 'el-icon-zoom-out',
          
          // 数据展示图标
          'el-icon-sort', 'el-icon-sort-up', 'el-icon-sort-down', 'el-icon-crop',
          'el-icon-picture', 'el-icon-picture-outline', 'el-icon-picture-outline-round',
          
          // 品牌图标
          'el-icon-eleme', 'el-icon-video-play', 'el-icon-video-pause',
          
          
        ]
      }
    },
   
	
    
    mounted() {
      this.lodeList()
	//   this.lodeGoods()
	  
    },
    
    methods: {
		downLode(){
			var bath
			if(this.searchForm.bath){
			bath = '&bath=' + this.searchForm.bath
			}else{
			bath = '&bath='
			}
				

			let url =  `${this.$domain}/excel/exportData?selectId=1${bath}`
			location.href = url
		},
		// downLode(){
		// 	if(this.selectId.length==0) return this.$message.error('请选择导出的数据')
		// 	let selectId = this.selectId.join(',')
		
		// 	let url =  `${this.$domain}/qrZipController/export?selectId=${selectId}`
		// 	location.href = url
		// },
		changeChecked(){
			console.log(this.checked)
			if(this.checked){
				for(let item of this.list){
					item.checked = true
				}
			}else{
				for(let item of this.list){
					item.checked = false
				}
			}
		},
		shouldShowCheckbox(row) {
		    // 例如，只有当某行的某个属性（如 isVisible）为 true 时才显示复选框
		    return row.isVisible;
		  },
		  handleCheckboxChange(row) {
		    // 处理复选框变化的事件
		    row.checked = !row.checked; // 更新行的 checked 状态
			
		  },
		handleSelectionChange(row){
			console.log(row)
		},
		showQrCode(row){
			console.log(row)
			
			let url = `${this.$baseUrl}/qrcode/?id=${row.qr_sn}`
			this.isShow = true
			setTimeout(()=>{
				var qrcodeContainer = document.getElementById('qrcode');
				if (qrcodeContainer) {
				    new QRCode(qrcodeContainer, url);
				} else {
				    console.error('二维码容器未找到');
				}
			},500)
			
			
		},
		load(tree, treeNode, resolve){
			for(let item of tree.list){
				item.goods_name = tree.goods_name
			}
			resolve(tree.list)
		},
		lodeGoods(){
				 
		  this.$api.post('/admin/getGoodsList',{}).then(res=>{
			  let data = res.data
			  this.goodsList = data.result
		  })
		},
		
		
		editRow(row){
			this.addTitle = '编辑'
			for(let i in this.form){
				this.form[i] = row[i]
			}
			this.formShow = true
		
		},
		addBtn(){
			this.formShow = true
			this.form = {
				id:null,
				goods_id:"",
				number:"1",
				num:'6',
				bath:""
			}
		},
		confirm(){
				this.$api.post('/system/updateMenu',this.form).then(res=>{
					//   if(res.code==200){
					  	this.$message.success('操作成功')
					  	this.formShow = false
					  	// this.lodeList()
						this.lodeMenu()
					//   }
				})
		},
		lodeMenu(){
			let job_id = sessionStorage.getItem('job_id')
			this.$api.post('/system/getMenuByJobId',{job_id}).then(result=>{
				if(result.data.length){
						let menuList = result.data.filter((item)=>{
							return item.parent_id == 0
						})
						console.log(menuList,111111)
						for(let ele of menuList){
							let arr = result.data.filter((element)=>{
								return element.parent_id == ele.id
							})
							ele.children = arr
						}
						console.log(menuList,22222)
						sessionStorage.setItem('menuList',JSON.stringify(menuList))
						history.go(0)
					}
			})
	   },
		delRow(id){
			this.$confirm('确定删除', '提示', {
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  type: 'warning'
					}).then(() => {
						let params = {
							dd:{id}
						}
					  this.$api.post('/admin/delQrCode',params).then(res=>{
					  	  if(res.code==200){
					  	  	this.lodeList()
					  	  }
					  })
			  })
	   },
	   reset(){
			this.searchForm = {
				bath:"",
				status:"-1"
			}
			this.time = []
			this.lodeList()
	   },
      lodeList(){
			if(this.time.length==2){
				this.searchForm.start_time = this.time[0]
				this.searchForm.end_time = this.time[1]
			}
		  let params = {
		          	page:this.page,
		          	pageSize:this.pageSize,
					searchForm:this.searchForm
		    }
		 
		  this.$api.post('/system/getMenuList',params).then(res=>{
			  let data = res.data
			  this.page_totle = data.count
			//   for(let item of data.result){
			// 	  item.isVisible = true
			// 	  item.checked = false
			// 	  for(let ele of item.children){
			// 		  ele.isVisible = false
			// 	  }
			//   }
			  this.list = data.result
		  })
	  }
      
    }
  }
</script>
<style>
	.el-table__header-wrapper .el-checkbox {
	  display: none;
	}
</style>

